<template>
	<view class="select">
		<input
			class="uni-input s30 family f500"
			disabled="false"
			:style="{ background: background, color: color }"
			v-model="iptVal"
			placeholder-style="color:#844902;"
			:placeholder="placeholder"
			@click="focus"
			@focus="focus"
		/>
		<view class="jian_box">
			<image :style="{ width: width, height: height }" :src="img" mode=""></image>
		</view>
		<view class="list_box" v-if="type == 0" :style="{ height: heightTwo, background: backgroundList }">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view
					class="list_txt f500 family s30"
					:style="isMaySelect && item.money == 0 ? 'color:#999;' : ''"
					v-for="(item, index) in list"
					:key="index"
					@click="active(item.shopname, item.id, item.money)"
				>
					{{ item.shopname }}
				</view>
			</scroll-view>
		</view>
		<view class="list_box" v-if="type == 1" :style="{ height: heightTwo, background: backgroundList }">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view v-if="item.name" class="list_txt f500 family s30" v-for="(item, index) in list" :key="index" @click="active(item.name, item.id)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: []
		},
		isMaySelect: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: String,
			default: '选择或输入店铺名称'
		},
		background: {
			type: String,
			default: '#EBBE87'
		},
		backgroundList: {
			type: String,
			default: '#F4F5F9'
		},
		color: {
			type: String,
			default: '#ffffff'
		},
		type: {
			type: Number,
			default: 0
		},
		index: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			img: '../pages/filePages/static/jiantou.png',
			width: '22rpx',
			height: '36rpx',
			iptVal: '',
			heightTwo: '0',
			id: 0
		};
	},
	watch: {
		list: {
			handler(newVal) {
				if (newVal.length) {
					if (this.index != -1) {
						const { name, id, money } = newVal[this.index];
						this.active(name, id, money);
					}
				}
			},
			immediate: true
		}
	},
	methods: {
		ion() {
			return this._data;
		},
		active(name, id, money) {
			if (this.isMaySelect && money == 0) {
				uni.showToast({
					title: '该店铺下暂无解锁金额',
					icon: 'none'
				});
				return;
			}
			this.iptVal = name;
			this.id = id;
			this.heightTwo = '0';
		},
		focus() {
			let flag = true;
			if (flag == true) {
				this.img = '../pages/filePages/static/xiajiantou.png';
				this.width = '36rpx';
				this.height = '22rpx';
				this.heightTwo = '684rpx';
				return (flag = false);
			} else {
				this.img = '../pages/filePages/static/jiantou.png';
				this.width = '22rpx';
				this.height = '36rpx';
				this.heightTwo = '0';
				return (flag = true);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.select {
	overflow: hidden;

	.uni-input {
		width: 606upx;
		height: 70upx;
		border-radius: 8upx 8upx 8upx 8upx;
		margin-top: 82upx;
		padding-left: 40upx;
		padding-right: 40upx;
	}

	.jian_box {
		width: 22upx;
		height: 36upx;
		position: relative;
		top: -53upx;
		left: 630upx;
	}

	.list_box {
		width: 646upx;
		border-radius: 8upx 8upx 8upx 8upx;
		padding: 0 0 0 40upx;
		overflow: hidden;

		.scroll-Y {
			height: 684upx;

			.list_txt {
				color: #666666;
				margin-top: 24upx;
				margin-bottom: 24upx;
			}
		}
	}
}
</style>
